<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')" :close-on-click-modal="false">
		<el-form ref="ruleForm" :model="form" :rules="rules" label-width="0">
			<el-form-item label="" prop="file">
				<slot class="el-upload__tip" name="contrite">请使用对应模版文件<span @click="download_template"
																					  style="color: #409eff;cursor: pointer">（下载模版文件）</span>
				</slot>
				<sc-upload-file :accept="accept" :apiObj="$API.system.role.uploadImportFile" @response="uploadResp"
								@fileUploadBefore="fileUploadBefore" @upval="upval"
								v-model:modelValue="form.file" :limit="limit" drag>
					<el-icon class="el-icon--upload">
						<el-icon-upload-filled/>
					</el-icon>
					<div class="el-upload__text">
						将文件拖到此处，或<em>点击上传</em>
					</div>
				</sc-upload-file>
			</el-form-item>
		</el-form>

		<el-row :gutter="0" class="box">
			<el-col v-if="parsing" :span="24">
				<el-alert title="数据解析中..." type="warning" :closable="false"/>
			</el-col>

			<el-col v-if="form.file != '' && uploadResponse.checkIsSuccess != undefined && uploadResponse.checkIsSuccess == true" :span="24">
				<div class="success custom-block">
					<p class="custom-block-title">验证结果: 成功</p>
					<p class="custom-block-dis">批量上传角色信息数据验证通过</p>
				</div>
			</el-col>
			<el-col v-else-if="form.file != '' && uploadResponse.checkIsSuccess != undefined && uploadResponse.checkIsSuccess == false" :span="24">
				<div class="error custom-block">
					<p class="custom-block-title">验证结果: 失败
						({{ uploadResponse.errorPosition ? uploadResponse.errorPosition.length : '未知' }})</p>
					<p class="custom-block-dis">系统检测到Excel文件中存在不符合规定的数据内容，请修改后再次上传<a :href="uploadResponse.errorInfoFileSrc"
						style="color: #409eff;cursor: pointer">（下载检测结果文件）</a></p>
					<p class="custom-block-dis">
						<el-scrollbar max-height="200px" width="100%">
							<el-alert :title="'行号: ' + error.rowNumber + ', ' + error.errorReason" type="error"
									  show-icon :closable="false"
									  v-for="(error, index) in uploadResponse.errorPosition" :key="index"/>
						</el-scrollbar>
					</p>
				</div>
			</el-col>
		</el-row>
		<template #footer>
			<el-button @click="visible=false">取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()" :disabled="parsing">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "import",
			titleMap: {
				import: '导入角色'
			},
			fileList: [{
				name: 'food.jpeg',
				url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
			}],
			visible: false,
			isSaveing: false,
			accept: ".xlsx",
			form: {
				file: ""
			},
			rules: {
				file: [
					{required: true, message: '请上传xlsx文件', trigger: 'change'}
				]
			},
			limit: 1,
			uploadResponse: {},
			parsing: false
		}
	},
	mounted() {

	},
	watch: {
		'form.file'(newVal) {
			if (!newVal) {
				this.uploadResponse = {}
				this.parsing = false
			}
		}
	},
	methods: {

		/***
		 * 显示当前组件窗口
		 * @param mode
		 * @returns {default.methods}
		 */
		open(mode = 'import') {
			this.mode = mode;
			this.visible = true;
			return this
		},

		/**
		 * 表单提交方法
		 */
		submit() {
			this.$refs.ruleForm.validate(async (valid) => {
				if (valid) {
					if (!this.uploadResponse.checkIsSuccess) {
						this.$message.warning("无法操作，请修改后再次上传Excel文件")
						return false;
					}
					this.isSaveing = true;
					let res = await this.$API.system.role.analysis.get({cacheKey: this.uploadResponse.id});
					this.isSaveing = false;
					if (res.status == 200) {
						this.$emit('success')
						this.visible = false;
						this.$message.success("操作成功")
					}
				} else {
					return false;
				}
			})
		},

		/**
		 * 用户导入模版文件下载
		 * @returns {Promise<void>}
		 */
		async download_template() {
			await this.$API.system.role.downloadTemplate.get();
		},

		/**
		 * 上传文件后响应信息回调
		 * @returns {Promise<void>}
		 */
		uploadResp(resp) {
			this.uploadResponse = resp.data;
			this.parsing = false
		},

		/**
		 * 文件上传前处理逻辑（多个文件时 会对应多次回调）
		 */
		fileUploadBefore(){
			this.$message.success('请等待文件解析结果...')
			this.parsing = true
		},

		/**
		 * 更新file列表回调
		 * @param data
		 */
		upval(data){
			this.form.file = data
		},
	}
}
</script>

<style>
.el-upload {
	display: block;
}

.el-alert {
	margin: 0px 0 0;
	padding: 2px;
}

.el-alert:first-child {
	margin: 0;
}

.box .el-alert__content {
	padding-top: 2px;
}

.el-scrollbar {
	width: 100%;
}

.res-dis {
	font-weight: 500;
}

.custom-block.success {
	padding: 12px 16px;
	background-color: #eef5fe;
	border-radius: 4px;
	border-left: 5px solid #409eff;
	margin: 0px 0;
	color: #303133;
}

.custom-block.error {
	padding: 8px 16px;
	background-color: #fcf1f0;
	border-radius: 4px;
	border-left: 5px solid #e47470;
	margin: 0px 0;
	color: #303133;
}

.custom-block .custom-block-title {
	font-weight: 700;
}

.custom-block .custom-block-dis {
	margin-top: 6px;
}
</style>
